@import "variables";

.db-table {
  overflow: visible;
  outline: transparent;
  outline-width: 5px;
  outline-style: solid;

  &-header {
    rect {
      cursor: grab;

      &:active {
        cursor: grabbing;
      }

      &:not([fill]), &[fill="undefined"]{
        fill: var(--table-header-color);
      }
    }


    text, &__name {
      transform: translateX(10px) translateY(.35em);
      font-weight: 700;
      font-size: 16px;
      fill: var(--table-header-fg-color);
      pointer-events: none;
      user-select: none;
    }
  }

  .db-table__background {
    --width: attr(data-width  px);
    --height: attr(data-height  px);
    fill: #3ea8de;
    x: -2px;
    y: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    //stroke: var(--table-highlight-stroke-color);
  }

  &__highlight {
    position: relative;
    &::after {
      overflow: visible;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      outline: 5px solid #3ea8de;
      content: "";
      background: red;
      z-index:90000;
      width: 500px;
      height: 500px;
    }

    .db-field__ref {
      rect {
        fill: var(--highlight-field-color);
      }
    }
  }
}
